<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>个人中心</span>
        <el-button class="pull-right" size="mini" type="primary" @click="handleEdit">编辑</el-button>
      </div>
      <div class="user-info">
        <div class="avatar">
          <img :src="userInfo.avatar" alt="用户头像" />
        </div>
        <div class="user-detail">
          <div class="username">
            <span>用户名：</span>
            <span>{{ userInfo.username }}</span>
          </div>
          <div class="email">
            <span>电子邮件：</span>
            <span>{{ userInfo.email }}</span>
          </div>
          <div class="tel">
            <span>电话号码：</span>
            <span>{{ userInfo.tel }}</span>
          </div>
        </div>
      </div>
      <el-calendar v-model="value">
      </el-calendar>
    </el-card>

    <el-dialog
        :visible.sync="dialogVisible"
        title="编辑用户信息"
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
      <el-form :model="editInfo" :rules="rules" ref="editForm" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editInfo.username" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="editInfo.avatar" :src="editInfo.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="电子邮件" prop="email">
          <el-input v-model="editInfo.email" />
        </el-form-item>
        <el-form-item label="电话号码" prop="tel">
          <el-input v-model="editInfo.tel" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      defaultAvatar: '', // 默认头像
      userInfo: {}, // 用户信息
      dialogVisible: false, // 编辑对话框可见性
      editInfo: {}, // 编辑的用户信息
      rules: { // 表单验证规则
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [{ required: true, message: '请输入电子邮件', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入电话号码',    trigger: 'blur' }],
      },
    };
  },
  mounted() {
// 组件挂载时从后端获取用户信息
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
// 发送GET请求获取用户信息
      this.$axios.get('/system/usercenter/list').then((response) => {
        this.userInfo = response.data.data.records
      }).catch((error) => {
        console.error(error);
      });
    },
    handleEdit() {
// 编辑按钮点击事件，将编辑框设为可见状态
      this.editInfo = Object.assign({}, this.userInfo);
      this.dialogVisible = true;
    },
    handleClose(done) {
// 关闭编辑对话框时清空表单
      this.$refs.editForm.resetFields();
      done();
    },
    handleSave() {
// 保存编辑结果，发送PUT请求更新用户信息
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$axios.post('/system/usercenter/update', this.editInfo).then(() => {
            this.dialogVisible = false;
            this.getUserInfo();
          }).catch((error) => {
            console.error(error);
          });
        } else {
          return false;
        }
      });
    },
    beforeAvatarUpload(file) {
// 上传前检查文件类型和大小
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    handleAvatarSuccess(response) {
      // 上传头像成功后更新表单中的头像URL
      this.editInfo.avatar = URL.createObjectURL(response.raw);
    },
  },
};
</script>

<style>

/* 设置卡片的宽度和背景颜色 */
.el-card {
  width: 1650px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 设置卡片标题的样式 */
.el-card__header {
  padding: 16px;
  background-color: #f5f5f5;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

/* 设置编辑按钮的样式 */
.el-button--primary {
  margin-left: 1450px;
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

/* 设置用户信息的样式 */
.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}

/* 设置用户头像的样式 */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 设置用户名、电子邮件和电话号码的样式 */
.user-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.username,
.email,
.tel {
  margin-bottom: 8px;
}

.username span,
.email span,
.tel span {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.username span:first-child,
.email span:first-child,
.tel span:first-child {
  margin-right: 8px;
}


.el-dialog__footer .el-button--primary {
  background-color: #27ae60;
  border-color: #27ae60;
}

.el-dialog__footer .el-button--primary:hover {
  background-color: #219b53;
  border-color: #219b53;
}


.el-button--primary:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}

.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;

  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #999;
}

.avatar-uploader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dialog-footer {
  text-align: right;
}
</style>